<template>
	<view>
		<view class="box">
			<image class="box-bg" src="../../static/user_bg.png" mode="widthFix"></image>
			<view class="box-relative" :class="{'flex--aj-center': !hasLogin}" @click="loginClick">
				<template v-if="hasLogin">
					<view class="box-level">
						<!-- <view class="level-item">
							当前等级
						</view> -->
					</view>
					<view class="box-info">
						<view class="info-avatar">
							<image :src="userInfo.avatar" mode=""></image>
						</view>
						<view class="info-name">
							<view class="info-mobile">
								Hi，{{ userInfo.nickname }}
							</view>
							<view class="info-desc" v-if="userInfo.mobile">
								{{ userInfo.mobile }}
							</view>
						</view>
					</view>
					<!-- <view class="box-content">
						<view class="content-title">
							<view class="text">
								新鲜人
							</view>
							<image src="../../static/icon/plaint.png" mode=""></image>
						</view>
						<view class="content-desc">
							还需1200成长值或2次消费升级至爱好者
						</view>
					</view> -->
				</template>
				<template v-else>
					<view class="login">
						<view :style="{height: statusBarHeight}">

						</view>
						<view class="login-avatar">
							<image :src="config.mini_logo" mode=""></image>
						</view>
						<view class="login-text">
							登录或注册
						</view>
						<view class="login-desc">
							生活需要仪式感
						</view>
					</view>
				</template>
			</view>
		</view>

		<view class="order">
			<view class="order-item" @click="jumpClick('/pages/user/reservation/order/order')">
				<view class="item-left">
					<view class="item-text">
						预约订单
					</view>
					<view class="item-text-sub">
						查看订单
					</view>
				</view>
				<image src="../../static/icon/meet_order.png" mode=""></image>
			</view>

			<view class="order-item" @click="jumpClick('/pages/user/mall/order/order')">
				<view class="item-left">
					<view class="item-text">
						商城订单
					</view>
					<view class="item-text-sub">
						查看订单
					</view>
				</view>
				<image src="../../static/icon/lite_order.png" mode=""></image>
			</view>
		</view>
		
		<view style="margin: 0 10rpx 30rpx 10rpx ;">
			<redirectPay />
		</view>
		<!-- <view class="func">
			<view class="func-item" v-for="(item,index) in funcList" :key="index" @click="jumpClick(item.page)">
				<image :src="item.image" mode=""></image>
				<view class="text">
					{{ item.text }}
				</view>
			</view>
		</view> -->

		<view class="list">
			<uni-list>
				<uni-list-item :showArrow="true" to="" v-for="(item,index) in funcList" :key="index"
					@click="jumpClick(item.page)">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" :src="item.image" mode=""></image>
						</view>
					</template>
					<template v-slot:body>
						<text class="slot-text">{{ item.text }}</text>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		

		<view class="support-footer" v-if="config.copyright">
			{{ config.copyright }}提供技术支持
		</view>


		<view>
			<authorize ref="authorize" :auth-show="authShow" :info-auth="infoAuth" :mobile-auth="mobileAuth"
				@updateInfo="updateInfo">
			</authorize>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import redirectPay from './pay/redirectPay.vue';
	export default {
		components:{redirectPay},
		data() {
			return {
				authShow: false,
				statusBarHeight: uni.getWindowInfo().statusBarHeight + 'px',
				funcList: [{
						image: '../../static/icon/coupon_user.png',
						text: '我的优惠券',
						page: '/pages/user/coupon/coupon'
					}, {
						image: '../../static/icon/address.png',
						text: '地址管理',
						page: '/pages/user/address/index'
					},
					{
						image: '../../static/icon/refund.png',
						text: '退款售后',
						page: '/pages/user/mall/refund/list'
					},
					{
						image: '../../static/icon/faq.png',
						text: '常见问题',
						page: '/pages/index/faq'
					},
					{
						image: '../../static/icon/join.png',
						text: '我要合作',
						page: '/pages/join/index'
					}, {
						image: '../../static/icon/customer.png',
						text: '客服',
						page: '/pages/kefu/kefu'
					}
				]
			}
		},
		computed: {
			...mapGetters({
				userInfo: 'user/info',
				infoAuth: 'user/infoAuth',
				mobileAuth: 'user/mobileAuth',
				hasLogin: 'user/hasLogin',
				config: 'user/meetConfig'
			})
		},
		onLoad() {

		},
		methods: {
			...mapMutations({
				setUserInfo: 'user/login',
			}),
			updateInfo(data) {
				this.setUserInfo(data)
			},
			loginClick() {
				if (this.hasLogin) {
					return false
				}

				if (!this.infoAuth) {
					this.authShow = true
					this.$refs.authorize.$refs.popup.open('center')
				} else if (!this.mobileAuth) {
					this.authShow = true
					this.$refs.authorize.$refs.mobilePopup.open('center')
				}
			},
			jumpClick(url) {
				if (!this.hasLogin) {
					this.loginClick()
					return false
				}

				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 100rpx;
	}

	.flex--aj-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box {
		width: 100%;
		// height: 738rpx;
		height: 484rpx;
		overflow: hidden;
		position: relative;
		background-color: #fff;

		.box-bg {
			width: 100%;
		}

		.box-relative {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			// height: 738rpx;
			height: 484rpx;

			.login {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;

				.login-avatar {
					border-radius: 50%;
					overflow: hidden;
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.login-text {
					font-size: 36rpx;
					font-weight: 800;
					color: #000000;
					margin-top: 20rpx;
				}

				.login-desc {
					color: #8A8A8A;
					font-size: 26rpx;
					font-weight: 400;
					margin-top: 20rpx;
				}
			}

			.box-level {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-top: 224rpx;
				padding-right: 32rpx;

				.level-item {
					width: auto;
					height: 40rpx;
					background: #35D14A;
					border-radius: 30rpx;
					font-weight: 800;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 6px 8px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.box-info {
				padding-left: 42rpx;
				display: flex;
				align-items: center;

				.info-avatar {
					background-color: #fff;
					border-radius: 50%;
					overflow: hidden;
					width: 110rpx;
					height: 110rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info-name {
					margin-left: 24rpx;

					.info-mobile {
						color: #000000;
						font-size: 36rpx;
						font-weight: 800;
					}

					.info-desc {
						color: #7B9481;
						font-size: 26rpx;
						font-weight: 400;
					}
				}
			}

			.box-content {
				margin-top: 108rpx;
				padding-left: 80rpx;
				width: 240rpx;

				.content-title {
					display: flex;
					align-items: center;

					.text {
						font-weight: 400;
						font-size: 48rpx;
						color: #000000;
					}

					image {
						width: 40rpx;
						height: 40rpx;
						margin-left: 18rpx;
					}
				}

				.content-desc {
					font-weight: 400;
					font-size: 20rpx;
					color: #38A353;
					margin-top: 20rpx;
				}
			}
		}
	}

	.order {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx;

		.order-item {
			width: 40%;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 18rpx 0 22rpx;

			.item-left {
				.item-text {
					font-weight: 800;
					font-size: 32rpx;
					color: #000000;
				}

				.item-text-sub {
					font-weight: 400;
					font-size: 20rpx;
					color: #8A8A8A;
					margin-top: 4rpx;
				}
			}

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 20rpx;
			}
		}
	}

	.func {
		padding: 0 10rpx;
		margin-top: 56rpx;
		display: flex;
		flex-wrap: wrap;

		.func-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 72rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			.text {
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				margin-top: 18rpx;
			}
		}
	}

	.list {
		margin: auto 28rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		overflow: hidden;

		.uni-list-item__container {
			align-items: center;
			padding: 15px;
		}

		.slot-box {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
		}

		.slot-image {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			width: 40rpx;
			height: 40rpx;
		}

		.slot-text {
			flex: 1;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			margin-left: 34rpx;
		}
	}

	.support-footer {
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		color: #666666;
		margin-top: 44rpx;
	}
</style>